<template>
    <div class="sjzxRightBottom">
        <div class="title">
            <!-- {{typeName1}} -->
            历史火情监测分析
        </div>
        <FirePanel />
    </div>
</template>

<script>
import FirePanel from "./historyFireMonitor/HistoryFireMonitorSelectPanel.vue";
import { ref, reactive, toRefs, onBeforeUnmount, onMounted } from "vue";
import {useStore} from "vuex"
export default {
    //props:["typeName"],
    components: {
        FirePanel,
    },
    setup() {
        const store = useStore();
        const state = reactive({
            checkAll: false,
            isIndeterminate: true,
        });
        onMounted(()=>{
            store.commit('changeSjzxLeftCurrentComponent',"HistoryFireMonitorDetail")
        })
        onBeforeUnmount(() => {
            viewer.entities.removeAll();
        });
        return {
            ...toRefs(state)
        };
    },
};
</script>
<style lang="stylus">
.sjzxRightBottom {
    .el-date-table td span {
        color: #000;
    }
}
</style>
<style lang="stylus" scoped>
.sjzxRightBottom {
    background: url('/images/sjzx/list.png') no-repeat;
    background-size: 100% 100%;
    width: vw(370);
    height: vh(555);
    margin-top: vh(15);

    .title {
        text-align: center;
        font-size: vw(16);
    }

    .themePic {
        width: 100%;
        display: grid;
        grid-template-columns: vw(122) vw(200);
        grid-row-gap: vh(20);
        grid-column-gap: vw(20);
        margin-top: vh(50);
        margin-left: vh(20);

        .themePicItem {
            display: flex;
            justify-content: space-around;
            background: url('/images/sjzx/item.png') no-repeat;
            background-size: 100% 100%;
            line-height: vh(37);
            height: vh(37);
            font-size: vw(14);
            margin-right: vw(20);
        }
    }
}
</style>